<template>
  <div class="overflow-hidden bg-white rounded-md">
    <BasicTree
      :title="props.leftTreeName"
      toolbar
      search
      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
      :titleClickFunc="refreshFunc"
      :titleToolTip="'点击刷新'"
      :clickRowToExpand="false"
      :treeData="treeData"
      :fieldNames="{ key: 'id', title: 'title' }"
      @select="handleSelect"
    />
  </div>
</template>
<script lang="ts" setup>
  import {BasicTree, TreeItem} from '@/components/Tree';
  import { getDict } from '@/api/sys/anno';
  import Message from "@/views/form-design/utils/message";
  import {useMessage} from "@/hooks/web/useMessage";

  defineOptions({ name: 'AnnoTableTree' });

  const emit = defineEmits(['select']);

  const treeData = ref<TreeItem[]>([]);

  const height = ref<number>(window.innerHeight - 180);
  const { createMessage } = useMessage();

  const refreshFunc = () => {
    fetch(selfClass.value!);
    // 提示消息
    createMessage.success('刷新成功');
  }


  // 监听窗口变化
  window.onresize = () => {
    height.value = window.innerHeight - 180;
  };
  async function fetch(className: string) {
    treeData.value = (await getDict({ annoClazz: className })) as unknown as TreeItem[];
  }

  function handleSelect(keys) {
    emit('select', keys[0]);
  }

  interface Prop {
    leftTreeClass?: string;
    leftTreeCatKey?: string;
    leftTreeName?: string;
  }

  const props = withDefaults(defineProps<Prop>(), {
    leftTreeName: '选择分类',
  });

  const selfClass = computed(() => {
    return props.leftTreeClass?.split('.').slice(-1)![0];
  });
  watch(
    selfClass,
    () => {
      fetch(selfClass.value!);
    },
    { immediate: true },
  );
</script>
